<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/htmleaf-demo.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" rel="stylesheet">
    <style type="text/css">
        html,
        body {
            height: 100%;
            min-height: 100%;
            font-family: 'Roboto Slab', serif;
            font-size: 1em;
        }

        html,
        body,
        ul,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            padding: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        #canvasContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 240px;
            z-index: -1;
        }

        .page {
            width: 960px;
            margin: 0 auto;
        }

        header {
            height: 240px;
            padding: 0 40px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }

        header > h1 {
            font-size: 3em;
            margin-bottom: 12px;
        }


        .stu {
            margin: auto;
            width: 450px;
            height: 350px;
            border: black 1px solid;
            text-align: center;
            border-radius: 20px;
            box-shadow: 0 0 20px black;
            position: relative;
        }

        table {
            margin: 0 auto;
        }

        span {
            font-size: 18px;
            font-weight: normal;
            display: inline-block;
            width: 60px;
            text-align: center;
        }


        .but {
            width: 300px;
            min-height: 20px;
            display: block;
            background-color: #4a77d4;
            border: 1px solid #3762bc;
            color: #fff;
            padding: 9px 14px;
            font-size: 15px;
            line-height: normal;
            border-radius: 5px;
            margin: 0;
            margin-top: 40px;
            cursor: pointer;
        }

        #tea {
            width: 218px;
        }

        input {
            width: 200px;
            margin-bottom: 5px;
            outline: none;
            padding: 10px;
            font-size: 13px;
            color: black;
            border-radius: 4px;
        }

        td {
            width: 150px;
        }

        .tab {
            font-size: 18px;
            border-bottom: 1px solid #cccccc;
            height: 60px;
            line-height: 60px;
            text-align: justify;
        }

        i {
            position: absolute;
            width: 26px;
            height: 26px;
            font-style: normal;
            right: 3px;
            top: 5px;
            line-height: 26px;
            text-align: center;
            background-color: #dddddd;
            border-radius: 20px;
            cursor: pointer;
        }

        strong {
            text-align: center;
            display: inline-block;
            width: 220px;
            cursor: pointer;
        }

        strong:hover {
            color: red;
        }

        i:hover {
            color: white;
            background-color: red;
        }

        #stuShow {
            display: none;
        }

        .blue {
            background-color: green;
        }
    </style>
</head>

<body>
<div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
</div>

<div class="page">
    <header>
        <h1>学生管理系统</h1>
    </header>
</div>
<div class="stu">
    <div class="tab">
        <strong id="tea">管理员登录</strong>
        <strong id="stu">用户登录</strong>
    </div>

    <div id="teaShow">
        <form action="adminLogin" method="post">
            <div style="margin:10px 0; font-weight: bold; font-size: 20px">管理员登录</div>
            <table>
                <tr>
                    <td><span style="margin-right: 12px;">用户名</span>
                        <input type="text" name="username" placeholder="输入10位数字" id="user">
                        <em style="display: inline-block; width: 10px; height: 10px;font-size: 18px;"></em></td>
                </tr>
                <tr>

                    <td><span style="margin-right: 22px;">密码&nbsp;</span>
                        <input name="password"
                               placeholder="输入6个字符(含数字字母)"
                               type="password" id="pwd"><em
                                style="display: inline-block; width: 10px; height: 10px;font-size: 18px;"></em></td>
                </tr>
                <tr>
                    <td>
                        <button class="but" type="submit">登录</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="stuShow">

        <form action="stuLogin" method="post">
            <div style="margin:10px 0; font-weight: bold; font-size: 20px">用户登录</div>
            <table>
                <tr>
                    <td><span style="margin-right: 12px;">用户名</span>
                        <input placeholder="输入10位数字" type="text" id="user1" name="username"><em
                                style="display: inline-block; width: 10px; height: 10px;font-size: 18px;"></em></td>
                </tr>
                <tr>
                    <td><span style="margin-right: 10px;">密码&nbsp;</span>
                        <input placeholder="输入6个字符(含数字字母)" type="password" id="pwd1" name="password">
                        <em style="display: inline-block; width: 10px; height: 10px;font-size: 18px;"></em></td>
                </tr>

                <tfoot>
                <tr>
                    <td>
                        <button class="but" type="submit">登录</button>
                        <a class="but blue " style="margin-top: 15px;" onclick="register()">注册</a></td>
                    <br>

                </tr>
                </tfoot>
            </table>
        </form>

    </div>
</div>
<script src="static/js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="static/lib/klouds.min.js"></script>
<script>
    function register() {
        window.location.href = 'http://localhost:8080/GradleModule/toRegister';
    }

    $(function () {

        $("button").click(function () {
            $.get("http://localhost:8080/GradleModule/adminLogin", function (result) {
                $("div").html(result);
            });
        });
        var mySky = klouds.create({
            selector: '#myCanvas',
            layerCount: 5
        })
        $("#stu").on("click", function () {
            $("#teaShow").css("display", "none");
            $("#stuShow").css("display", "block");

        })
        $("#tea").on("click", function () {
            $("#stuShow").css("display", "none");

            $("#teaShow").css("display", "block");
        })

        function formatColor(color) {
            return (
                '#' +
                color
                    .map(function (c) {
                        return Math.round(c * 255).toString(16)
                    })
                    .join('')
            )
        }


    })
</script>
</body>

</html>